<template>
    <div id="select">
        <div class="selected clearfix">
    <div id="seldif" class="dif" @click="selDif">
      <span>难度</span>
      <i class='middle'></i>
    </div>
    <div id="seltime" class="til" @click="selTime">
      <span>时长</span>
      <i class='middle'></i>
    </div>
    <div class="par" @click="selPar">
        <select v-if="type == 0 ? true : false "  style = "color:#fff"  name="type"  v-model="type">
            <option value="0" disabled="disabled">部位</option>
            <option value="1">上身</option>
            <option value="2">臀腿</option>
            <option value="3">腰腹</option>
            <option value="4">全身</option>
        </select>
        <select v-else style = "color:#fdb811"  name="type"  v-model="type">
            <option value="0" disabled="disabled">部位</option>
            <option value="1">上身</option>
            <option value="2">臀腿</option>
            <option value="3">腰腹</option>
            <option value="4">全身</option>
        </select>
      <!--<span>部位</span>-->
      <i v-if="type == 0 ? true : false " class="parS" :style= "'background-image: url('+$qiniu.url+'assets/img/parS.png)'"></i>
      <i v-else class="parS" :style= "'background-image: url('+$qiniu.url+'assets/img/parSS.png)'"></i>
    </div>
    <div class="sel" id="selO" @click="selectOption">
      <span class="sel-shuxian"></span>
      <span v-if="flag == false"  style = "color:#fff" >筛选</span>
      <span v-else  style = "color:#fdb811" >筛选</span>
      <i class="selS" v-if="flag==false" :style= "'background-image: url('+$qiniu.url+'assets/img/selw.png)'"></i>
      <i class="selS" v-else :style= "'background-image: url('+$qiniu.url+'assets/img/sely.png)'"></i>
    </div>
  </div>
  <div class="optionWrapper">
      <div class="time clearfix">
        <div class="title">时长</div>
        <div class="text">
          <span>短</span>
          <span>中</span>
          <span>长</span>
        </div>
      </div>
      <div class="difficult clearfix">
        <div class="title">难度</div>
        <div class="text">
          <span>基础</span>
          <span>初级</span>
          <span>中级</span>
          <span>高级</span>
        </div>
      </div>
      <div class="partChoice clearfix">
        <div class="title">部位</div>
        <div class="text">
          <span>上身</span>
          <span>臀腿</span>
          <span>腰腹</span>
          <span>全身</span>
        </div>
      </div>
      <div class="btnwrapper">
        <div class="btn" @click="chongzhi">重置</div>
      <div class="btn sure" @click="sure">确定</div>
      </div>
  </div>
    </div>
</template>
<script>
    import api from '../../api';
    import {
        refreshTitle,
        getToday,
        forACdate,
        today,
    } from "../../tools.js";
    export default {
        props: ['courses'],
        data() {
            return {
                time: 0,
                type: 0,
                part: 0,
                uri: '',
                timelength: '',
                flag: false,
                difficult: '',
                soncourses: this.courses,
                judgeFlag: '',
            }
        },
        computed: {

        },
        methods: {
            //获取所有的数据---初始化页面的课程
            getCoursesD(val) {
                var today = getToday(new Date()).year + '-' + getToday(new Date()).month + '-' + getToday(new Date()).day;
                var date = this.$route.query.date || today;
                var that = this;
                var localURI = window.sessionStorage.getItem('uri') || null;
                var localDIF = window.sessionStorage.getItem('difficult');
                var localTIME = window.sessionStorage.getItem('timelength');
                var chilID = document.querySelector('#seldif');
                var chilIT = document.querySelector('#seltime');
                if (!(localURI == null || localURI == 'null')) {
                    this.flag = true;
                    // 进行条件的拉取 数据
                    if (!(localDIF == '' || localDIF == null || localDIF == 'null')) {
                        var type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]);
                        var time = parseInt(localURI.substr(localURI.indexOf('time'), 6).split('=')[1]);
                        var part = parseInt(localURI.substr(localURI.indexOf('part'), 6).split('=')[1]);
                        var optionWrapper = document.querySelector(".optionWrapper");
                        if (time) {
                            that.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                        }
                        if (part) {
                            that.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                        }
                        if (type) {
                            that.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                        }
                        // 当前也有难度的时候
                        if (localDIF == 'middle') {
                            chilID.style.color = '#fff';
                            this.type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]) || 0;
                            api.getCourse(localURI).then(function(result) {
                                that.soncourses = forACdate(result.data);
                            })
                        } else {
                            parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]) || 0;
                            chilID.children[1].classList = localDIF;
                            chilIT.children[1].classList = 'middle';
                            chilIT.style.color = '#fff';
                            chilID.style.color = '#fdb811';
                            this.getCoursesS(localDIF, "grade", localURI);
                        }

                    } else if (!(localTIME == '' || localTIME == null || localTIME == 'null')) {
                        var type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]);
                        var time = parseInt(localURI.substr(localURI.indexOf('time'), 6).split('=')[1]);
                        var part = parseInt(localURI.substr(localURI.indexOf('part'), 6).split('=')[1]);
                        var optionWrapper = document.querySelector(".optionWrapper");
                        if (time) {
                            that.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                        }
                        if (part) {
                            that.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                        }
                        if (type) {
                            that.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                        }
                        if (localTIME == 'middle') {
                            chilIT.style.color = '#fff';
                            this.type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]) || 0;
                            api.getCourse(localURI).then(function(result) {
                                that.soncourses = forACdate(result.data);
                            })
                        } else {
                            this.type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]) || 0;
                            chilIT.children[1].classList = localTIME;
                            chilID.children[1].classList = 'middle';
                            chilID.style.color = '#fff';
                            chilIT.style.color = '#fdb811';
                            this.getCoursesS(localTIME, "duration", localURI);
                        }
                    } else {
                        that.firstData(localURI, that);
                    }
                } else {
                    api.getallCourse(date).then(function(result) {
                        if (localDIF == 'high' || localDIF == 'middle' || localDIF == 'low') {
                            // 得保留样式
                            chilID.children[1].classList = localDIF;
                            chilIT.children[1].classList = 'middle';
                            chilIT.style.color = '#fff';
                            that.firstOption(localDIF, chilID, that, result.data);
                        } else if (localTIME == 'high' || localTIME == 'middle' || localTIME == 'low') {
                            chilIT.children[1].classList = localTIME;
                            chilID.children[1].classList = 'middle';
                            chilID.style.color = '#fff';
                            that.firstOption(localTIME, chilIT, that, result.data);
                        } else {
                            that.soncourses = forACdate(result.data); // 获取所有的数据进行格式化
                            window.sessionStorage.clear();
                        }


                    })
                }
            },
            // 进行条件的删选
            firstData(localURI, that) {
                var type = parseInt(localURI.substr(localURI.indexOf('type'), 6).split('=')[1]);
                var time = parseInt(localURI.substr(localURI.indexOf('time'), 6).split('=')[1]);
                var part = parseInt(localURI.substr(localURI.indexOf('part'), 6).split('=')[1]);
                var optionWrapper = document.querySelector(".optionWrapper");
                if (time) {
                    that.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                }
                if (part) {
                    that.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                }
                if (type) {
                    that.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                }
                api.getCourse(localURI).then(function(result) {
                    that.uri = localURI;
                    if (localURI.length < 8) {
                        that.type = 0;
                        return;
                    } else if (localURI.length == 8) {
                        // 当且仅当一个当前只有一个条件的时候
                        that.type = parseInt(localURI.substr(2, 6).split("=")[1]);
                        return;
                    } else if (localURI.length > 8 && 　localURI.indexOf('type') > -1) {
                        // 获取type的类型
                        that.type = parseInt(type);
                    }
                    that.flag = true;
                })
            },
            // 根据条件初始化数据
            firstOption(localOption, chilI, that, result) {
                // if (localOption) {

                if (localOption == 'middle') {
                    chilI.style.color = '#fff';
                    that.soncourses = forACdate(result);
                } else {
                    chilI.style.color = '#fdb811';
                    that.getCoursesS(localOption, "duration");
                }
            },
            // 单独获取数据
            getACourse() {
                var today = getToday(new Date()).year + '-' + getToday(new Date()).month + '-' + getToday(new Date()).day;
                var date = this.$route.query.date || today;
                var that = this;
                api.getallCourse(date).then(function(result) {
                    that.soncourses = forACdate(result.data); // 获取所有的数据进行格式化
                    window.sessionStorage.clear();
                })
            },
            // 根据uri获取数据
            getURIData(uri) {
                var that = this;
                api.getCourse(uri).then(function(result) {
                    that.soncourses = forACdate(result.data);
                })
            },
            //获取删选的条件进行拼接字符串
            genURI() {
                // type表示部位，part表示难度
                var uri = '?';
                // var and = false
                if (this.time != '') {
                    uri = uri + "time=" + this.time;
                    // and = true;
                }
                if (this.type != '') {
                    // if (and)
                    uri = uri + "&";
                    uri = uri + "type=" + this.type;
                }
                if (this.part != '') {
                    // if (and)
                    uri = uri + "&";
                    uri = uri + "part=" + this.part;
                }
                this.uri = uri == "?" ? "" : uri;
            },
            //获取删选的数据---按照删选条件进行删选(单一的选择)
            getCoursesS(option, value, localOption) {
                var that = this;
                var today = getToday(new Date()).year + '-' + getToday(new Date()).month + '-' + getToday(new Date()).day;
                var date = this.$route.query.date || today;
                //首先获取数据
                //按照难度进行排序
                if (arguments.length != 0) {
                    if (window.sessionStorage.typeuri || localOption) {
                        var uri = localOption ? localOption : window.sessionStorage.typeuri;
                        var type = parseInt((uri).substr((uri).indexOf('type'), 6).split('=')[1]);
                        if (type) {
                            that.type = type;
                        }
                        api.getCourse(uri).then(function(result) {
                            var newA = result.data;
                            if (option == "high") {
                                newA = newA.sort(that.sortByH(value));
                            } else {
                                newA = newA.sort(that.sortByL(value));
                            }
                            newA = forACdate(newA);
                            that.soncourses = newA;

                        })
                    } else {
                        api.getallCourse(date).then(function(result) {
                            var newA = result.data;
                            if (option == "high") {
                                newA = newA.sort(that.sortByH(value));
                            } else {
                                newA = newA.sort(that.sortByL(value));
                            }
                            newA = forACdate(newA);
                            that.soncourses = newA;
                        })
                    }
                } else {
                    if (that.uri != '') {
                        api.getCourse(that.uri).then(function(result) {
                            that.soncourses = forACdate(result.data);
                        })
                    } else {
                        return;
                    }
                }
            },
            //排序的方法(从高到低)
            sortByH(option) {
                return function(a, b) {
                    return b[option] - a[option];
                }
            },
            //排序方法（从低到高）
            sortByL(option) {
                return function(a, b) {
                    return a[option] - b[option];
                }
            },
            //根据课程的难度进行排序
            selDif() {
                //点击进行排序，按照难度从高到低的排序
                // 1、进行图片的替换
                var target = event.target;
                target = target.nodeName == "DIV" ? target : target.parentNode;
                var chilI = target.children[1];
                var seltime = document.querySelector("#seltime");
                seltime.style.color = "#fff";
                seltime.children[1].classList = "middle";
                target.style.color = "#fdb811";
                this.flag = false;
                this.type = 0;
                var selO = document.querySelector("#selO");
                selO.style.color = "#fff";
                var uri = window.sessionStorage.localURI ? window.sessionStorage.localURI : window.sessionStorage.typeuri;
                window.sessionStorage.removeItem("timelength");
                this.timelength = '';
                if (uri && (uri).substr((uri).indexOf('type'), 6).split('=')[1]) {
                    this.flag = true;
                    var type = parseInt(uri.substr(uri.indexOf('type'), 6).split('=')[1]);
                    var time = parseInt(uri.substr(uri.indexOf('time'), 6).split('=')[1]);
                    var part = parseInt(uri.substr(uri.indexOf('part'), 6).split('=')[1]);
                    var optionWrapper = document.querySelector(".optionWrapper");
                    if (time) {
                        this.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                    }
                    if (part) {
                        this.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                    }
                    if (type) {
                        this.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                    }
                }
                if (chilI.classList == "middle") {
                    //添加high
                    chilI.classList = "high";
                    this.getCoursesS("high", "grade");
                    this.difficult = 'high';
                } else if (chilI.classList == "high") {
                    chilI.classList = "low";
                    this.getCoursesS("low", "grade");
                    this.difficult = 'low';
                } else if (chilI.classList == "low") {
                    chilI.classList = "middle";
                    this.difficult = 'middle';
                    if (window.sessionStorage.typeuri) {
                        var typeuri = window.sessionStorage.typeuri;
                        this.type = parseInt(typeuri.substr(typeuri.indexOf('type'), 6).split('=')[1]);
                        this.getURIData(typeuri);
                    } else {
                        this.getACourse();
                    }
                    target.style.color = "#ffffff";
                }
            },
            //根据时长进行排序
            selTime() {
                //点击进行排序，按照难度从高到低的排序
                // 1、进行图片的替换
                var target = event.target;
                target = target.nodeName == "DIV" ? target : target.parentNode;
                var chilI = target.children[1];
                var seldif = document.querySelector("#seldif");
                seldif.style.color = "#fff";
                seldif.children[1].classList = "middle";
                target.style.color = "#fdb811";
                this.flag = false;
                this.type = 0;
                var selO = document.querySelector("#selO");
                selO.style.color = "#fff";
                var uri = window.sessionStorage.localURI ? window.sessionStorage.localURI : window.sessionStorage.typeuri;
                if (uri && (uri).substr((uri).indexOf('type'), 6).split('=')[1]) {
                    this.flag = true;
                    var type = parseInt(uri.substr(uri.indexOf('type'), 6).split('=')[1]);
                    var time = parseInt(uri.substr(uri.indexOf('time'), 6).split('=')[1]);
                    var part = parseInt(uri.substr(uri.indexOf('part'), 6).split('=')[1]);
                    var optionWrapper = document.querySelector(".optionWrapper");
                    if (time) {
                        this.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                    }
                    if (part) {
                        this.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                    }
                    if (type) {
                        this.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                    }
                }
                window.sessionStorage.removeItem("difficult");
                this.difficult = '';
                if (chilI.classList == "middle") {
                    //添加high
                    chilI.classList = "high";
                    this.timelength = "high";
                    this.getCoursesS("high", "duration");
                } else if (chilI.classList == "high") {
                    chilI.classList = "low";
                    this.timelength = 'low';
                    this.getCoursesS("low", "duration");
                } else if (chilI.classList == "low") {
                    chilI.classList = "middle";
                    this.timelength = 'middle';
                    if (window.sessionStorage.typeuri) {
                        var typeuri = window.sessionStorage.typeuri;
                        this.type = parseInt(typeuri.substr(typeuri.indexOf('type'), 6).split('=')[1]);
                        this.getURIData(typeuri);
                    } else {
                        this.getACourse();
                    }
                    target.style.color = "#ffffff";
                }
            },
            //根据部位进行排序
            selPar() {
                var target = event.target.nodeName == "DIV" ? event.target : event.target.parentNode;
                var chilselect = target.children[0];
                var selO = document.querySelector("#selO");
                selO.style.color = "#fff";
                var seltime = document.querySelector("#seltime");
                seltime.style.color = "#fff";
                seltime.children[1].classList = "middle";
                var seldif = document.querySelector("#seldif");
                seldif.style.color = "#fff";
                seldif.children[1].classList = "middle";
                this.flag = false;
                var that = this;
                var uri = window.sessionStorage.localURI ? window.sessionStorage.localURI : window.sessionStorage.typeuri;
                if (uri && (uri).substr((uri).indexOf('type'), 6).split('=')[1]) {
                    this.flag = true;
                    var type = parseInt(uri.substr(uri.indexOf('type'), 6).split('=')[1]);
                    var time = parseInt(uri.substr(uri.indexOf('time'), 6).split('=')[1]);
                    var part = parseInt(uri.substr(uri.indexOf('part'), 6).split('=')[1]);
                    var optionWrapper = document.querySelector(".optionWrapper");
                    if (time) {
                        that.saveColor(optionWrapper.querySelectorAll(".time span"), time - 1);
                    }
                    if (part) {
                        that.saveColor(optionWrapper.querySelectorAll(".difficult span"), part - 1);
                    }
                    if (type) {
                        that.saveColor(optionWrapper.querySelectorAll(".partChoice span"), type - 1);
                    }
                }
                chilselect.onchange = function() {
                    //获取值
                    if (that.type != 0) {
                        // that.getCoursesD();
                        that.time = 0;
                        that.part = 0;
                        that.genURI();
                        window.sessionStorage.typeuri = that.uri;
                        that.chongzhi();
                        var optionWrapper = document.querySelector(".optionWrapper");
                        if (that.type) {
                            that.saveColor(document.querySelectorAll(".partChoice span"), that.type - 1);
                            that.flag = true;
                        }
                        return;
                    }
                }
            },
            //选择删选的条件
            selectOption() {
                //点击的时候显示删选条件
                var optionWrapper = document.querySelector(".optionWrapper");
                var selO = document.querySelector("#selO");
                var seltime = document.querySelector("#seltime");
                seltime.style.color = "#fff";
                seltime.children[1].classList = "middle";
                var seldif = document.querySelector("#seldif");
                seldif.style.color = "#fff";
                seldif.children[1].classList = "middle";
                if (optionWrapper.classList == "optionWrapper active") {
                    selO.style.color = "#fff";
                    this.flag = false;

                } else {
                    optionWrapper.style.transition = "all 1s";
                    optionWrapper.classList.add("active");
                }
            },
            //条件的点击事件
            chooseOP(option) {
                var that = this;
                for (var i = 0; i < option.length; i++) {
                    option[i].addEventListener("touchend", function() {
                        //选中的时候改变背景色
                        //排他
                        if (this.classList == '') {
                            that.paita(option);
                            this.style.backgroundColor = "#9e9e9e";
                            this.style.color = "#fff";
                            this.value = true;
                            this.classList.add('test');
                        } else {
                            this.style.backgroundColor = "#eee";
                            this.style.color = "#4e4f4a";
                            this.value = false;
                            this.classList.remove('test');
                        }
                    })
                }
            },
            // 进行所有的的刷新
            forOption(option) {
                for (var i = 0; i < option.length; i++) {
                    if (this.classList == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
            //排他
            paita(option) {
                for (var j = 0; j < option.length; j++) {
                    option[j].style.backgroundColor = "#eee";
                    option[j].style.color = "#4e4f4a";
                    option[j].value = false;
                }
            },
            // 保留的背景色
            saveColor(option, j) {
                option[j].style.backgroundColor = "#9e9e9e";
                option[j].style.color = "#fff";
                option[j].value = true;
            },
            //重置事件
            chongzhi() {
                var optionWrapper = document.querySelector(".optionWrapper");
                this.paita(optionWrapper.querySelectorAll(".time span"));
                this.paita(optionWrapper.querySelectorAll(".difficult span"));
                this.paita(optionWrapper.querySelectorAll(".partChoice span"));
            },
            //删选事件
            sure() {
                //获取到每一个的值；
                var that = this;
                var selO = document.querySelector("#selO");
                var optionWrapper = document.querySelector(".optionWrapper");
                var time, diff, part;
                that.time = that.getValue(optionWrapper.querySelectorAll(".time span"), time, that.time);
                that.part = that.getType(optionWrapper.querySelectorAll(".difficult span"), diff, that.part);
                that.type = that.getType(optionWrapper.querySelectorAll(".partChoice span"), part, that.type);
                that.genURI();

                if (that.uri != "") {
                    //改变字体的颜色
                    selO.style.color = "#fdb811";
                    this.flag = true;
                    window.sessionStorage.typeuri = that.uri;
                } else {
                    that.getACourse(); // 根据日期获取数据
                    selO.style.color = "#fff";
                    this.flag = false;
                }
                optionWrapper.style.transition = "all 1s";
                optionWrapper.classList.remove("active");
                if (!that.flag) {
                    that.chongzhi();
                }
            },
            //获取当前选中的删选条件1
            getValue(option, value, newVal) {
                for (var i = 0; i < option.length; i++) {
                    if (option[i].value == true) {
                        //获取值
                        value = option[i].innerHTML;
                    }
                }
                if (value != '') {
                    if (value == "短") {
                        newVal = 1;
                    } else if (value == "中") {
                        newVal = 2;
                    } else if (value == "长") {
                        newVal = 3;
                    } else {
                        newVal = 0;
                    }
                } else {
                    newVal = 0;
                }
                return newVal;
            },
            //获取当前选中的删选条件2
            getType(option, value, newVal) {
                for (var i = 0; i < option.length; i++) {
                    if (option[i].value == true) {
                        //获取值
                        value = option[i].innerHTML;
                    }
                }
                if (value != '') {
                    if (value == "上身" || value == "基础") {
                        newVal = 1;
                    } else if (value == "臀腿" || value == "初级") {
                        newVal = 2;
                    } else if (value == "腰腹" || value == "中级") {
                        newVal = 3;
                    } else if (value == "全身" || value == '高级') {
                        newVal = 4;
                    } else {
                        newVal = 0;
                    }
                } else {
                    newVal = 0;
                }
                return newVal;
            }

        },
        watch: {
            //进行监听：当父组件的值进行改变的时候，子组件进行改变
            courses(val) {
                this.soncourses = val;
            },
            //子组件的对值的改变的返回给父组件
            soncourses(val) {
                this.$emit("getCoursesD", val);
                this.$emit('getCoursesS', val);
            },
            // 进行监听uri
            uri(val) {
                // 只要uri发生改变就进行刷新
                if (this.uri) {
                    this.getURIData(this.uri);
                    // this.flag = true;
                } else {
                    this.getACourse();
                }
            }
        },
        mounted() {
            this.$nextTick(function() {
                var optionWrapper = document.querySelector(".optionWrapper");
                this.chooseOP(optionWrapper.querySelectorAll(".time span"));
                this.chooseOP(optionWrapper.querySelectorAll(".difficult span"));
                this.chooseOP(optionWrapper.querySelectorAll(".partChoice span"));
                this.getCoursesD(); // 首次进行获取数据
                this.getCoursesS();
            });
        },
        beforeDestroy() {
            // 此时的日期的记录----以便于返回的时候返回到当前的日期
            if (this.$route && this.$route.name == 'course_detail') {
                // 当且仅当页面进入课程详情页面的时候记录当前删选的条件
                var localURI = window.sessionStorage.getItem('uri');
                var localDIF = window.sessionStorage.getItem('difficult');
                var localTIME = window.sessionStorage.getItem('timelength');
                var uri = this.uri || localURI,
                    difficult = this.difficult || localDIF,
                    timelength = this.timelength || localTIME;
                window.sessionStorage.setItem('uri', uri);
                window.sessionStorage.setItem('difficult', difficult);
                window.sessionStorage.setItem('timelength', timelength);
            } else {
                window.sessionStorage.removeItem('uri');
                window.sessionStorage.removeItem('difficult');
                window.sessionStorage.removeItem('timelength');
            }
        },
    }
</script>
<style>
    #select {
        font-size: 16px;
        .selected {
            width: 100%;
            height: 40px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0, 0, 0, 0.8);
        }
        select {
            appearance: none;
            background: none;
            border: none;
            color: #ffffff;
            outline: none;
            width: 100%;
            height: 100%;
            color: #fff;
            /*position: relative;*/
            font-size: 14px;
            text-indent: 35%;
        }
        .selected div {
            width: 25%;
            height: 100%;
            color: #fff;
            float: left;
            position: relative;
            /*font-size: 17px;*/
        }
        .selected div i {
            width: 10px;
            height: 14px;
            background-size: cover;
            position: absolute;
            position: absolute;
            top: 30%;
            left: 78%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%)
        }
        .selected div .sel-shuxian {
            display: block;
            width: 1px;
            height: 25px;
            background-color: #505050;
            position: absolute;
            top: 18%;
            left: 15%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%)
        }
        .selected div .parS {
            width: 9px;
            height: 9px;
            background-size: cover;
            position: absolute;
            position: absolute;
            top: 40%;
            left: 78%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%)
        }
        .selected div .selS {
            width: 10px;
            height: 10px;
            background-size: cover;
            position: absolute;
            top: 40%;
            left: 75%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
        }
        .selected span {
            display: block;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 25%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            font-size: 14px;
        }
        .high {
            background-image: url(http://wechat-static.shapejoy.com//assets/img/high.png)!important;
        }
        .low {
            background-image: url(http://wechat-static.shapejoy.com//assets/img/low.png)!important;
        }
        .middle {
            background-image: url(http://wechat-static.shapejoy.com//assets/img/zhengchang.png)!important;
        }
        .selected div .active {
            width: 9px;
            height: 9px;
            background-size: cover;
            position: absolute;
            position: absolute;
            top: 40%;
            left: 78%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            background-image: url(http://wechat-static.shapejoy.com//assets/img/parSS.png)!important;
        }
        .optionWrapper {
            width: 100%;
            /*height: 350px;*/
            background-color: #fff;
            position: fixed;
            top: -440px;
            left: 0px;
            z-index: 999;
            padding-left: 20px;
            padding-top: 10px;
            overflow: hidden;
            color: #4e4f4a;
        }
        .optionWrapper .title {
            display: block;
            line-height: 25px;
            font-size: 14px;
        }
        .optionWrapper .text {
            width: 100%;
            height: 40px;
        }
        .optionWrapper .text span {
            display: block;
            width: 25%;
            height: 30px;
            background-color: #eee;
            border-radius: 4px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
        }
        .optionWrapper .btnwrapper {
            padding-left: 30px;
            padding-top: 10px;
        }
        .optionWrapper .btnwrapper .btn {
            width: 30%;
            height: 30px;
            border: 1px solid #fdb811;
            float: left;
            box-sizing: border-box;
            margin-right: 20%;
            border-radius: 5px;
            margin-bottom: 20px;
            line-height: 30px;
            text-align: center;
        }
        .optionWrapper .btnwrapper .btn.sure {
            background-color: #fdb811;
            color: #fff;
        }
        .optionWrapper.active {
            transition: all 1s;
            top: 0px;
        }
    }
</style>